<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Test Carousel - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        .slide {
            display: flex!important;
            align-items: center;
            justify-content: center;
        }

        .image-box {
            width: 640px;
            height: 480px;
        }
    </style>
</head>
<body class="cloak">
<nav data-role="appbar">
    <span class="app-bar-item">Any</span>
    <div class="app-bar-item no-hover">
        <input type="checkbox" data-role="theme-switcher" data-state="dark"/>
    </div>
</nav>
<div class="container">
    <h1>Carousel test page</h1>

    <div>
        <div class="mt-4 mb-4 border bd-default d-flex flex-row p-4 gap-4">
            <label class="d-flex flex-align-center gap-1">
                Slide
                <input type="radio" name="r1" value="slide">
            </label>
            <label class="d-flex flex-align-center gap-1">
                Slide Vertical
                <input type="radio" name="r1" value="slide-v">
            </label>
            <label class="d-flex flex-align-center gap-1">
                Fade
                <input type="radio" name="r1" value="fade">
            </label>
            <label class="d-flex flex-align-center gap-1">
                Switch
                <input type="radio" name="r1" value="switch">
            </label>
            <label class="d-flex flex-align-center gap-1">
                Zoom
                <input type="radio" name="r1" value="zoom">
            </label>
            <label class="d-flex flex-align-center gap-1">
                Swirl
                <input type="radio" name="r1" value="swirl" checked>
            </label>
        </div>
        <div class="d-flex flex-align-center flex-justify-center">
            <div style="width: 600px;">
                <div data-role="carousel" data-effect="swirl" data-duration="1000" id="carousel" data-auto-start="true">
                    <div class="slide">
                        <img src="https://picsum.photos/id/237/800" alt=""/>
                    </div>
                    <div class="slide">
                        <img src="https://picsum.photos/id/238/800" alt=""/>
                    </div>
                    <div class="slide">
                        <img src="https://picsum.photos/id/239/800" alt=""/>
                    </div>
                    <div class="slide">
                        <img src="https://picsum.photos/id/240/800" alt=""/>
                    </div>
                    <div class="slide">
                        <img src="https://picsum.photos/id/241/800" alt=""/>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="../lib/metro.js"></script>
<script>
    $("input[name=r1]").on("click", function(){
        $("#carousel").attr("data-effect", this.value);
    })
</script>
</body>
</html>
